<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="./static/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="./static/bootstrap.min.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增删查改之</title>

</head>


<script src="./static/jquery.min.js"></script>
<script src="./static/bootstrap.min.js"></script>

<%--<script src="./static/index.js"></script>--%>
<body onload="load()">

<div class="modal fade" id="modalModify">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">X</button>
                <h4 class="modal-title">信息修改：</h4>
            </div>
            <div class ="modal-body" >
                <div class="input-group">
                    <span class="input-group-addon">deptno:</span>
                    <input class="input-sm" type="text" v-model="dept1.deptno"/>
                </div>
                <br/>
                <div class="input-group">
                    <span class="input-group-addon">dname:</span>
                    <input class="input-sm" type="text" v-model="dept1.dname"/>
                </div>
                <br/>
                <div class="input-group">
                    <span class="input-group-addon">loc:</span>
                    <input class="input-sm" type="text" v-model="dept1.loc"/>
                </div>
            </div>
            <div class = "modal-footer">
                <button type="button" class="btn btn-default" data-dismiss ="modal">取消</button>
                <button type="button" class="btn btn-primary" id="modify">修改</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalModify2">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">X</button>
                <h4 class="modal-title">信息添加：</h4>
            </div>
            <div class ="modal-body" >
                <div class="input-group">
                    <span class="input-group-addon">dname:</span>
                    <input class="input-sm" type="text" v-model="dept2.dname"/>
                </div>
                <br/>
                <div class="input-group">
                    <span class="input-group-addon">loc:</span>
                    <input class="input-sm" type="text"  v-model="dept2.loc"/>
                </div>
            </div>
            <div class = "modal-footer">
                <button type="button" class="btn btn-default" data-dismiss ="modal">取消</button>
                <button type="button" class="btn btn-primary" id="addproduct">添加</button>
            </div>
        </div>
    </div>
</div>
<table id="mytab" style="margin: auto;width:500px;" border="1">
    <caption style="font-size: 24px;text-align: center;">dept数据库</caption>
    <tr>
        <th style="text-align: center;">deptno</th>
        <th style="text-align: center;">dname</th>
        <th style="text-align: center;">loc</th>
        <th style="text-align: center;">Action</th>
    </tr>
    <tr v-for="dept in depts">
        <td style="text-align: center;">{{dept.deptno}}</td>
        <td style="text-align: center;">{{dept.dname}}</td>
        <td style="text-align: center;">{{dept.loc}}</td>
        <td style="text-align: center;">
            <button @click=del(dept.deptno)>删除</button>
            <button @click=upd(dept.deptno)>修改</button>
        </td>
    </tr>
    <tr>
        <td style="text-align: center;" colspan="4">
            <button id="add">添加</button>
        </td>
    </tr>
</table>
<script src="./static/vue2.min.js"></script>
<script type="text/javascript">
    var mVal = new Vue({
        el:'#modalModify',
        data:{
            dept1:{"deptno":0,"dname":"","loc":""}
        }
    });
    var mVal2 = new Vue({
        el:'#modalModify2',
        data:{
            dept2:{"deptno":0,"dname":"","loc":""}
        }
    });
    var mytable = new Vue({
        el:'#mytab',
        data:{
            depts:[{"deptno":1,"dname":"zhangsan1","loc":"xian"},
                {"deptno":2,"dname":"zhangsan2","loc":"xian"},
                {"deptno":3,"dname":"zhangsan3","loc":"xian"},
                {"deptno":4,"dname":"zhangsan4","loc":"xian"},]
        },
        methods:{
            del:function(id){
                if (window.confirm("确定要删除嘛？")) {
                    $.ajax({
                        url: 'dept/' + id,
                        type: 'delete',
                        dataType: 'json',
                        success: function (data) {
                            if (200 == data) {
                                for (var i = 0; i < mytable.depts.length; i++) {
                                    if (mytable.depts[i].deptno == id) {
                                        mytable.depts.splice(i, 1);
                                        break;
                                    }
                                }
                            }
                        }
                    });
                }
            },
            upd:function (id) {
                var ndept = mytable.depts;
                for(var i=0;i<ndept.length;i++){
                    if (ndept[i].deptno==id){
                        mVal.dept1.deptno = ndept[i].deptno;
                        mVal.dept1.dname = ndept[i].dname;
                        mVal.dept1.loc = ndept[i].loc;
                        break;
                    }
                }
                $("#modalModify").modal("show");
            }
        }
    });
    function load(){
        $.ajax({
            url:"dept",
            // data:"application/json",
            type:"GET",
            dataType:"json",
            success:function(data){
                mytable.depts=data;
            }
        });
    }
    $(function () {
        $('#add').click(function () {
            $("#modalModify2").modal("show");
        });
        $('#addproduct').click(function () {
            $.ajax({
                url:'dept',
                type:'POST',
                contentType:'application/json;character:utf-8',
                dataType:'json',
                data:JSON.stringify(mVal2.dept2),
                success:function (data) {
                    mytable.depts.push(data);
                }
            })
            $("#modalModify2").modal("hide");
        });
        $('#modify').click(function () {
            $.ajax({
                url:"dept",
                type:"PUT",
                data:JSON.stringify(mVal.dept1),
                contentType: 'application/json',
                dataType:'json',
                success:function (data) {
                    console.log(data);
                    for (var i=0;i<mytable.depts.length;i++){
                        if (mytable.depts[i].deptno==mVal.dept1.deptno){
                            mytable.depts[i].dname=mVal.dept1.dname;
                            mytable.depts[i].loc=mVal.dept1.loc;
                            break;
                        }
                    }
                }
            })
            $("#modalModify").modal("hide");
        })
    })
</script>
</body>
</html>
